{% extends "base.html" %}

{% block subtitle %}
  {{ exploration_title }}
{% endblock subtitle %}

{% block header_js %}
  {{ super() }}
  {% if exploration_version %}
    <script type="text/javascript">
      GLOBALS.GADGET_SPECS = JSON.parse('{{GADGET_SPECS|js_string}}');
      GLOBALS.INTERACTION_SPECS = JSON.parse('{{INTERACTION_SPECS|js_string}}');
      GLOBALS.SHARING_OPTIONS_TWITTER_TEXT = JSON.parse('{{SHARING_OPTIONS_TWITTER_TEXT|js_string}}');
      GLOBALS.explorationVersion = JSON.parse('{{exploration_version|js_string}}');
    </script>
  {% endif %}

  {{dependencies_html}}
{% endblock header_js %}

{% block navbar_breadcrumb %}
  <ul class="nav navbar-nav oppia-navbar-breadcrumb">
    <li>
      <span class="oppia-navbar-breadcrumb-separator"></span>
      {{exploration_title}}
    </li>
  </ul>
{% endblock navbar_breadcrumb %}

{% block local_top_nav_options %}
  <div ng-controller="LearnerLocalNav">
    <ul class="nav navbar-nav oppia-navbar-nav navbar-right" ng-controller="LearnerLocalNav" style="margin-right: 0px;">
      <li class="dropdown">
        <a href="" tooltip="Share" tooltip-placement="left" class="dropdown-toggle oppia-share-dropdown-toggle" data-toggle="dropdown">
          <span class="glyphicon glyphicon-share"></span>
        </a>
        <ul class="dropdown-menu oppia-share-dropdown-menu" role="menu" ng-mouseover="onMouseoverDropdownMenu($event)" ng-mouseleave="onMouseoutDropdownMenu($event)">
          {% if SHARING_OPTIONS['gplus'] %}
            <li>
              <a ng-href="https://plus.google.com/share?url=<[serverName]>/explore/<[explorationId]>"
                 onclick="return !window.open(this.href, '', 'height=600, width=600, menubar=no, toolbar=no, resizable=yes, scrollbars=yes')"
                 target="_window" tooltip="Google+" tooltip-placement="left">
                <img src="/images/general/gplus.png" alt="Google+">
              </a>
            </li>
          {% endif %}

          {% if SHARING_OPTIONS['facebook'] %}
            <li>
              <a ng-href="https://www.facebook.com/sharer/sharer.php?sdk=joey&u=<[serverName]>/explore/<[explorationId]>&display=popup&ref=plugin&src=share_button"
                 onclick="return !window.open(this.href, '', 'height=336, width=640')"
                 target="_window" tooltip="Facebook" tooltip-placement="left">
                <img src='/images/general/fb.png' alt="Facebook">
              </a>
            </li>
          {% endif %}

          {% if SHARING_OPTIONS['twitter'] %}
            <li>
              <a ng-href="https://twitter.com/share?text=<[escapedTwitterText]>&url=<[serverName]>/explore/<[explorationId]>"
                 onclick="return !window.open(this.href, '', 'height=460, width=640')"
                 target="_window" tooltip="Twitter" tooltip-placement="left">
                <img src="/images/general/twitter.png" alt="Twitter">
              </a>
            </li>
          {% endif %}

          <li>
            <a href="" ng-click="showEmbedExplorationModal(explorationId)"
               tooltip="Embed" tooltip-placement="left">
              <img src="/third_party/static/material-design-icons-1.0.1/ic_link_black_48dp.png">
            </a>
          </li>
        </ul>
      </li>
      <li popover-placement="bottom" popover-template="popover/feedback" popover-trigger="click">
        <a href="" tooltip="Feedback" tooltip-placement="bottom">
          <span class="glyphicon glyphicon-comment"></span>
        </a>
      </li>
      {% if can_edit %}
        <li>
          <a ng-href="/create/<[explorationId]>" tooltip="Edit" tooltip-placement="bottom" target="_blank">
            <span class="glyphicon glyphicon-pencil"></span>
          </a>
        </li>
      {% endif %}
    </ul>
  </div>
{% endblock local_top_nav_options %}

{% block content %}
  {{ skin_tag }}

  <br><br><br>

  {% if not iframed %}
    {% include 'attribution_guide.html' %}
  {% endif %}

  {% include 'components/exploration_embed_button.html' %}
  {% include 'components/ratings.html' %}

  <script type="text/ng-template" id="popover/feedback">
    <feedback-popup></feedback-popup>
  </script>

  <script type="text/ng-template" id="components/feedback">
    <div style="min-width: 250px;">
      <div ng-show="!feedbackSubmitted">
        <div>
          <img src="/third_party/static/material-design-icons-1.0.1/ic_close_black_48dp.png" class="oppia-close-popover-button" ng-click="closePopover()">
        </div>
        <br>

        <div>
          <textarea ng-model="feedbackText" rows="5" class="oppia-feedback-popover-textarea" placeholder="Leave feedback for the authors..." focus-on="<[feedbackPopoverId]>">
          </textarea>
        </div>

        <!-- The z-index ensures that the button is not overlapped by the checkbox div. -->
        <md-button class="pull-right" ng-class="{'oppia-feedback-popover-submit-btn-enabled': feedbackText}" style="margin-top: 6px; z-index: 30;" ng-click="saveFeedback()" ng-disabled="!feedbackText">Submit</md-button>
        <div class="checkbox" style="font-size: 0.9em; margin: 12px 0 4px 0;" ng-show="isLoggedIn">
          <label>
            <input type="checkbox" ng-model="isSubmitterAnonymized">
            Stay Anonymous
          </label>
        </div>
      </div>

      <div ng-show="feedbackSubmitted">
        Thank you for the feedback!
      </div>
    </div>
  </script>

  {% include 'components/gadget_panel.html' %}
{% endblock %}

{% block footer_js %}
  {{ super() }}
  <script>
    {{ include_js_file('services/explorationContextService.js') }}
    {{ include_js_file('components/gadgetPanel.js') }}
    {{ include_js_file('components/explorationEmbedButton.js') }}
    {{ include_js_file('player/PlayerServices.js') }}
    {{ include_js_file('player/StateTransitionService.js') }}
    {{ include_js_file('components/ratings.js')}}
    {{ include_skins_js_file(skin_js_url) }}
  </script>

  {{ skin_templates }}
  {{ interaction_templates }}
  {{ gadget_templates }}
{% endblock footer_js %}
